<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/play.css">
</head>

<body>
  <div id="boombox">
    <div class="boombox-handle"></div>

    <div class="boombox-body">
      <section class="master-controls">
        <input type="range" id="volume" class="control-volume" min="0" max="2" value="1" list="gain-vals" step="0.01"
          data-action="volume" />
        <datalist id="gain-vals">
          <option value="0" label="min">
          <option value="2" label="max">
        </datalist>
        <label for="volume">VOL</label>

        <input type="range" id="panner" class="control-panner" list="pan-vals" min="-1" max="1" value="0" step="0.01"
          data-action="panner" />
        <datalist id="pan-vals">
          <option value="-1" label="left">
          <option value="1" label="right">
        </datalist>
        <label for="panner">PAN</label>

        <button class="control-power" role="switch" aria-checked="false" data-power="on">
          <span>On/Off</span>
        </button>
      </section>

      <section class="tape">
        <audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/outfoxing.mp3" crossorigin="anonymous"></audio>
        <button data-playing="false" class="tape-controls-play" role="switch" aria-checked="false">
          <span>Play/Pause</span>
        </button>
      </section>

    </div>
  </div>

  <script src="js/play.js"></script>
</body>

</html>